import React, { useRef, useState, useEffect } from 'react';
import { connect } from 'umi';
import TableDataBlock from '@/components/TableDataBlock';
import { reloadTab } from '@/utils/utils';
import { notification } from 'antd';
import { Button, Modal, Space, Form, Row, Col } from 'antd';
import { goodsType_status, commission_type } from '@/common/contact'
import FormCondition from '@/components/FormCondition';
import { useUpdateEffect } from 'ahooks';
const SelectShop = (props) => {
    const {
        visible = false,
        onClose,
        loading,
        list,
        dispatch,
        onChange,
    } = props;
    const { show = false, details = [],
    } = visible;
    const [form] = Form.useForm();
    const [selectedRowKeys, setSelectedRowKeys] = useState([])
    const childRef = useRef();
    console.log(selectedRowKeys, 'selectedRowKeys')
    useEffect(() => {
        if (show) {
            setSelectedRowKeys(details)
        }
        else {
            setSelectedRowKeys([])
        }
    }, [show])
    const rowSelectionChecked = {
        type: 'checkBox',
        hideSelectAll: true,
        onSelect: (record, selected, selectedRows) => {
            const { id } = record;
            if (selected) {
                setSelectedRowKeys([...selectedRowKeys, record]);
            } else {
                setSelectedRowKeys(
                    selectedRowKeys.filter((item) => {
                        return item.id != id;
                    }),
                );
            }
        },
        onSelectAll: (selected, selectedRowsKey, changeRows) => {
            let selectedRows = selectedRowsKey.filter((val) => {
                if (val) {
                    return true;
                }
            });
            if (selected) {
                setSelectedRowKeys([
                    ...selectedRowKeys,
                    ...selectedRows.reduce((item, val) => {
                        let flag = true;
                        selectedRowKeys.forEach((o) => {
                            if (o.id == val.id) {
                                flag = false;
                            }
                        });
                        if (flag) {
                            return [...item, val];
                        }
                        return item;
                    }, []),
                ]);
            } else {
                setSelectedRowKeys(
                    selectedRowKeys.reduce((item, val) => {
                        let flag = true;
                        changeRows.forEach((o) => {
                            if (o.id == val.id) {
                                flag = false;
                            }
                        });

                        if (flag) {
                            return [...item, val];
                        }
                        return item;
                    }, []),
                );
            }
        },
        selectedRowKeys: selectedRowKeys.map((item) => {
            return item.id.toString();
        }),
        preserveSelectedRowKeys: true,
    };

    const searchItems = [
        {
            label: '商品类型',
            name: 'goodsType',
            type: 'select',
            select: goodsType_status
        },
        {
            label: '商品名称',
            name: 'keyword',
        },
        {
            label: '添加时间',
            type: 'rangePicker',
            name: 'createStartTime',
            end: 'createEndTime',
        },
    ];
    const handleUpAudit = () => {
        onChange && onChange(selectedRowKeys)
        onClose()
    };
    const getColumns = [
        {
            title: '商品名称',
            dataIndex: 'goodsName',
        },
        {
            title: '商品类型 ',
            dataIndex: 'goodsType',
            render: (e) => {
                return goodsType_status[e]
            }
        },

    ];
    const modalProps = {
        title: '选择商品',
        width: 900,
        visible: typeof visible === 'boolean' ? visible : show,
        maskClosable: true,
        destroyOnClose: true,
        zIndex: 1001,
        confirmLoading: loading,
        footer: <Space>
            <Button onClick={() => onClose()}>取消</Button>
            <Button type='primary' onClick={() => handleUpAudit()}>确定</Button>
        </Space>
    };

    return (
        <Modal {...modalProps} onCancel={onClose} onOk={handleUpAudit}>
            <TableDataBlock
                rowSelection={rowSelectionChecked}
                searchItems={searchItems}
                cRef={childRef}
                loading={loading}
                columns={getColumns}
                rowKey={(record) => `${record.id}`}
                dispatchType="promoter/fetchListPromoterGoods"
                {...list}
            ></TableDataBlock>


        </Modal>
    );
};

export default connect(({ promoter, loading }) => ({
    list: promoter.promoterGoodsList,
    loading: loading.effects['promoter/fetchListPromoterGoods']
}))(SelectShop);
